<template>
    <div class="left-main">
        <div class="title">
            <div class="name">水土保持管家后台管理平台</div>
        </div>
        <div class="mian">
            <Transition
                appear
                enter-active-class="animate__animated animate__bounceInLeft"
                tag="div"
            >
                <div class="contenet">
                    <div class="img"><img :src="bgImg" alt="" /></div>
                    <div class="base-title">欢迎使用本系统</div>
                    <div class="tips-title">水土保持管家后台管理平台</div>
                </div>
            </Transition>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bgImg: require(`@/assets/images/img-login-bg${Math.floor(
                Math.random() * 7
            ) + 1}.png`)
        }
    }
}
</script>
<style lang="scss" scoped>
.left-main {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .title {
        @include box_absolute($top: 0, $left: 0);
        @include box_flex(
            $width: 100%,
            $height: 120px,
            $direction: row,
            $justify: flex-start,
            $align: center
        );

        padding-left: 30px;
        .icon {
            @include box_flex(
                $width: auto,
                $height: auto,
                $direction: row,
                $justify: center,
                $align: center
            );
            img {
                width: 50px;
                height: auto;
            }
        }
        .name {
            padding-left: 20px;
            // font-family: BOLD-FONT-BUX;
            font-size: 24px;
            font-weight: bolder;
            letter-spacing: 3px;
        }
    }
    .mian {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: center,
            $align: center,
            $flex-1: 1
        );
        .contenet {
            @include box_flex(
                $width: auto,
                $height: auto,
                $direction: column,
                $justify: center,
                $align: flex-start
            );
            .img {
                @include box_flex(
                    $width: auto,
                    $height: auto,
                    $direction: column,
                    $justify: center,
                    $align: center
                );

                margin-bottom: 50px;
                img {
                    width: 400px;
                }
            }
            .base-title {
                padding: 30px 0;
                font-size: 28px;
                font-weight: bold;
                letter-spacing: 3px;
            }
            .tips-title {
                @include font_color('text-primary');
            }
        }
    }
}
</style>
